<template>
  <div style="min-height: calc(100vh - 340px)">
    <a-form
      :model="formState"
      name="horizontal_login"
      layout="inline"
      autocomplete="off"
    >
      <a-form-item>
        <el-cascader
          clearable
          placeholder="公告类型"
          :props="{ multiple: true }"
          v-model="formState.infoid"
          :options="opbulletin"
          max-collapse-tags="1"
          collapse-tags
          collapse-tags-tooltip
        />

        <!-- <a-select
          v-model:value="formState.infoid"
          placeholder="公告类型"
          style="width: 220px"
          allowClear
        >
          <a-select-option
            v-for="item in type"
            :key="item.infoid"
            :value="item.infoid"
            >{{ item.infoname }}</a-select-option
          >
        </a-select> -->
      </a-form-item>

      <a-form-item>
        <!-- <a-select
          v-model:value="formState.industry"
          placeholder="采购类别"
          style="width: 220px"
          allowClear
        >
          <a-select-option
            :key="item.id"
            v-for="item in tags"
            :value="item.id"
            >{{ item.name }}</a-select-option
          >
        </a-select> -->

        <el-cascader
          clearable
          placeholder="采购类别"
          :props="{ value: 'id', label: 'name', multiple: true }"
          v-model="formState.industry"
          :options="tags"
          max-collapse-tags="1"
          collapse-tags
          collapse-tags-tooltip
        />
      </a-form-item>

      <a-form-item>
        <a-select
          v-model:value="formState.process_status"
          placeholder="审核状态"
          style="width: 220px"
          allowClear
        >
          <a-select-option value="1">审核中</a-select-option>
          <a-select-option value="2">审核通过</a-select-option>
          <a-select-option value="3">审核失败</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="getData" :icon="h(SearchOutlined)"
          >查询</a-button
        >
      </a-form-item>
    </a-form>
    <a-table
      class="ant-table-striped mt-[20px]"
      size="middle"
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      :row-class-name="
        (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
      "
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex == 'option'">
          <a-button
            type="link"
            v-if="record?.process_status == 2"
            @click="look(record?.nid)"
            >查看</a-button
          >
          <a-button type="link" v-else @click="setEdit(record)">编辑</a-button>

          <a-button
            type="link"
            v-if="record?.process_status == 3"
            @click="fail(record?.process_reason)"
            >查看原因</a-button
          >

          <a-button type="link" danger @click="deleteOne(record?.nid)"
            >删除</a-button
          >
        </template>
        <template v-if="column.dataIndex == 'industry'">
          {{ tags?.find((p) => p.id == record.industry)?.name }}
        </template>
        <template v-if="column.dataIndex == 'infoid'">
          {{ getType(record.infoid) }}
        </template>

        <template v-if="column.dataIndex == 'process_status'">
          {{
            record?.process_status == 1
              ? "审核中"
              : record?.process_status == 2
              ? "审核通过"
              : "审核失败"
          }}
        </template>
      </template>
    </a-table>
    <a-pagination
      class="mt-[20px]"
      v-model:current="page.current"
      show-quick-jumper
      :total="page.total"
      @change="onChange"
      :show-total="(total) => `共 ${page.total} 条`"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import {
  searchgetInfomation,
  Inforeleaselist,
  Inforeleasetags,
  Inforeleasedel,
} from "../../../../Api/work";
import { getInfomationchild } from "@/Api/shoop/index.js";
import { h } from "vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue/es/components";
import Modal from "ant-design-vue/es/modal/Modal";
const page = reactive({
  current: 1,
  total: 0,
  size: 10,
});

const emit = defineEmits(["setEdit"]);
const router = useRouter();

const look = (nid) => {
  window.open(`/searchInfo?id=${nid}`, "_blank");
};

const fail = (info) => {
  Modal.info({
    title: "失败原因",
    content: info,
  });
};

const deleteOne = async (nid) => {
  const res = await Inforeleasedel({ nid });
  if (res?.data?.code == 1) {
    message.success("操作成功");
    getData();
  } else {
    message.error(res?.data?.msg);
  }
};

const setEdit = (record) => {
  emit("setEdit", record.nid);
};

const formState = ref({
  infoid: undefined,
  industry: undefined,
  process_status: undefined,
});

const columns = [
  { title: "公告类型", dataIndex: "infoid" },
  { title: "标题信息", dataIndex: "title" },
  { title: "采购类别", dataIndex: "industry" },
  { title: "提交日期", dataIndex: "release_time_text" },
  { title: "审核状态", dataIndex: "process_status" },
  { title: "操作", dataIndex: "option" },
];

const type = ref([]);

const tags = ref([]);

const before = async () => {
  const res = await searchgetInfomation();
  type.value = res?.data?.data;
  const res2 = await Inforeleasetags();
  tags.value = res2?.data?.data;
};

const getType = (id) => {
  return type.value?.find((p) => p.infoid == id)?.infoname || "--";
};
onMounted(() => {
  before();
});

const dataSource = ref([]);
const getData = async () => {
  console.log("formState.value", formState.value);
  const params = {
    ...formState.value,
    infoid: formState.value?.infoid?.map((p) => {
      if (p?.length > 1) {
        return p[1];
      } else {
        return p;
      }
    }),
    industry: formState.value?.industry?.map((p) => {
      if (p?.length > 0) {
        return p[0];
      } else {
        return p;
      }
    }),
    page: page.current,
    limit: page.size,
  };

  const res = await Inforeleaselist(params);
  dataSource.value = res.data?.data?.list;

  page.total = res.data?.data?.count;
};

getData();
const onChange = (p) => {
  page.current = p;
  getData();
};

let opbulletin = ref([]);
const getInfomationchilds = () => {
  getInfomationchild().then((res) => {
    opbulletin.value = res.data.data;
  });
};
getInfomationchilds();
</script>

<style lang="scss" scoped>
.ant-table-striped :deep(.table-striped) td {
  background-color: #edf0f6;
}

:deep(
    :where(.css-dev-only-do-not-override-omspr6).ant-table-wrapper
      .ant-table-thead
      > tr
      > th
  ) {
  background: #ecf4ff !important;
}
</style>
